<template>
    <!-- 分配菜单弹窗  -->
    <el-dialog
      v-model="menuDialogVisibleRef"
      :title="'【' + checkedRoleVoRef?.name + '】权限分配'"
      width="800px"
      @close="closeDialogCallBack"
    >
      <el-scrollbar v-loading="loadingRef" max-height="600px">
        <el-tree
          ref="menuRef"
          node-key="value"
          show-checkbox
          :data="menuListRef"
          :default-expand-all="true"
        >
          <template #default="{ data }">
            {{ data.label }}
          </template>
        </el-tree>
      </el-scrollbar>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleRoleMenuSubmit"
            >确 定</el-button
          >
          <el-button @click="menuDialogVisibleRef = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { PropType, ref } from 'vue';
import { TypeRolePageVoI, TypeRoleQueryI } from '@/api/role/role_types';
import * as roleApi from '@/api/role/role_api_index'
import * as menuApi from '@/api/menu/menu_api_index';
import { NslUtil4Vue } from '@/utils/NslUtil4Vue';
import { ElMessage, ElTree } from 'element-plus';
import {$bus} from '@/event_bus/event_bus_index'


    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion

// const roleQueryParamsInit:TypeRoleQueryI={
//     pageNum:1,
//     pageSize:10,
//     keywords:undefined
// }

// const roleQueryParamsModel=defineModel<TypeRoleQueryI>({
//     // type:Object as PropType<TypeRoleQueryI>,
//     required:true
// })
const menuDialogVisibleRef=ref(false);  
const loadingRef=ref(false);
const checkedRoleVoRef=ref<TypeRolePageVoI>({});
const menuListRef = ref<TypeOptionI[]>([]);
const menuRef=NslUtil4Vue.componentRef(ElTree);

async function openDialog(checkedRoleVo:TypeRolePageVoI){
    if(checkedRoleVo.id){
        menuDialogVisibleRef.value=true;
        checkedRoleVoRef.value.name=checkedRoleVo.name;
        checkedRoleVoRef.value.id=checkedRoleVo.id;
        loadingRef.value=true;

        try{
            let response;
            response=await menuApi.getMenuOptions();
            menuListRef.value=response.data;
            response=await roleApi.getRoleMenuIds(checkedRoleVo.id)
            const checkedMenuIds=response.data;
            // setChecked	设置节点是否被选中, 使用此方法必须设置 node-key 属性	
            //(key/data, checked, deep) 接收三个参数: 1. 要选中的节点的 key 或者数据 2. 一个布尔类型参数表明是否选中. 3. 一个布尔类型参数表明是否递归选中子节点
            checkedMenuIds.forEach(e=>{
                menuRef.value?.setChecked(e,true,false);
            })
        }finally{
            loadingRef.value=false;
        }
       
    }
    
}

/** 角色分配菜单保存提交 */
function handleRoleMenuSubmit() {
  const roleId = checkedRoleVoRef.value.id;
  if (roleId) {
    const checkedMenuIds: number[] = menuRef.value!.getCheckedNodes(false, true)
      .map((node: any) => node.value  as number);

    loadingRef.value = true;
    roleApi.updateRoleMenus(roleId, checkedMenuIds)
      .then(() => {
        ElMessage.success("分配权限成功");
        menuDialogVisibleRef.value = false;
        $bus.emit('role-reset-and-query');
      })
      .finally(() => {
        loadingRef.value = false;
      });
  }
}

function closeDialogCallBack(){
  $bus.emit('role-reset-and-query');
}


defineExpose({
    openDialog,
})
</script>
<style lang='scss' scoped>
    
</style>